<template>
  <view class="container">
    <!-- 积分卡片 -->
    <points-card />

    <!-- 功能入口 -->
    <view class="function-section">
      <view class="section-header">
        <text class="section-title">积分功能</text>
      </view>
      
      <view class="function-grid">
        <view class="function-item" @tap="goToTasks">
          <view class="function-icon">
            <u-icon name="calendar" color="#ff6b81" size="48" />
          </view>
          <text class="function-name">每日任务</text>
          <text class="function-desc">完成任务获得积分</text>
        </view>
        
        <view class="function-item" @tap="goToHistory">
          <view class="function-icon">
            <u-icon name="order" color="#ff6b81" size="48" />
          </view>
          <text class="function-name">积分记录</text>
          <text class="function-desc">查看积分明细</text>
        </view>
        
        <view class="function-item" @tap="goToLevel">
          <view class="function-icon">
            <u-icon name="star" color="#ff6b81" size="48" />
          </view>
          <text class="function-name">等级特权</text>
          <text class="function-desc">查看等级权益</text>
        </view>
        
        <view class="function-item" @tap="goToExchange">
          <view class="function-icon">
            <u-icon name="gift" color="#ff6b81" size="48" />
          </view>
          <text class="function-name">积分兑换</text>
          <text class="function-desc">用积分兑换好礼</text>
        </view>
      </view>
    </view>

    <!-- 热门任务 -->
    <view class="tasks-section">
      <view class="section-header">
        <text class="section-title">热门任务</text>
        <text class="section-more" @tap="goToTasks">查看更多 ></text>
      </view>
      
      <view class="tasks-list">
        <view
          v-for="task in popularTasks"
          :key="task.id"
          class="task-card"
          @tap="completeTask(task)"
        >
          <view class="task-icon">
            <u-icon :name="task.icon" color="#ff6b81" size="32" />
          </view>
          <view class="task-content">
            <text class="task-name">{{ task.name }}</text>
            <text class="task-desc">{{ task.description }}</text>
          </view>
          <view class="task-reward">
            <text class="reward-points">+{{ task.points }}</text>
            <u-icon name="heart-fill" color="#ff6b81" size="14" />
          </view>
          <button
            class="task-btn"
            :class="{ completed: task.completed }"
            :disabled="task.completed"
          >
            {{ task.completed ? '已完成' : '去完成' }}
          </button>
        </view>
      </view>
    </view>

    <!-- 积分规则 -->
    <view class="rules-section">
      <view class="section-header">
        <text class="section-title">积分规则</text>
      </view>
      
      <view class="rules-content">
        <view class="rule-item">
          <text class="rule-title">🎯 如何获得积分</text>
          <text class="rule-desc">完成每日任务、参与活动、点餐消费均可获得积分</text>
        </view>
        <view class="rule-item">
          <text class="rule-title">⭐ 等级特权</text>
          <text class="rule-desc">等级越高，获得的积分奖励越多，兑换折扣越大</text>
        </view>
        <view class="rule-item">
          <text class="rule-title">🎁 积分兑换</text>
          <text class="rule-desc">积分可兑换菜品、优惠券、特殊礼品等</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/store/modules/user'
import PointsCard from '@/components/points-card/index.vue'

const userStore = useUserStore()

// 数据
const popularTasks = ref([
  {
    id: 1,
    name: '早安吻',
    description: '给伴侣一个温暖的早安吻',
    points: 10,
    icon: 'heart',
    completed: false
  },
  {
    id: 2,
    name: '洗碗小能手',
    description: '主动承担今天的洗碗任务',
    points: 20,
    icon: 'setting',
    completed: false
  },
  {
    id: 3,
    name: '浪漫晚餐',
    description: '一起准备一顿浪漫的晚餐',
    points: 30,
    icon: 'home',
    completed: true
  },
  {
    id: 4,
    name: '每日分享',
    description: '分享今天最开心的事情',
    points: 15,
    icon: 'chat',
    completed: false
  }
])

// 方法
const goToTasks = () => {
  uni.navigateTo({ url: '/pages/points/tasks' })
}

const goToHistory = () => {
  uni.navigateTo({ url: '/pages/points/history' })
}

const goToLevel = () => {
  uni.navigateTo({ url: '/pages/points/level' })
}

const goToExchange = () => {
  uni.showToast({
    title: '积分兑换功能开发中',
    icon: 'none'
  })
}

const completeTask = (task) => {
  if (!task.completed) {
    task.completed = true
    userStore.setPoints(userStore.totalPoints + task.points)
    uni.showToast({
      title: `获得 ${task.points} 积分`,
      icon: 'success'
    })
  }
}

onMounted(() => {
  // 可以在这里加载任务数据
})
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 1334rpx;
}

.function-section,
.tasks-section,
.rules-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
}
    
    .section-more {
      font-size: 24rpx;
      color: #999;
}
  }
}

.function-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
   margin-right: 20rpx; &:last-child { margin-right: 0; }
  
  .function-item {
    background: #f8f8f8;
    border-radius: 20rpx;
    padding: 40rpx 20rpx;
    text-align: center;
    transition: transform 0.2s;
    
    &:active {
      transform: scale(0.95);
}
    
    .function-icon {
      margin-bottom: 15rpx;
}
    
    .function-name {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 8rpx;
}
    
    .function-desc {
      font-size: 24rpx;
      color: #666;
}
  }
}

.tasks-list {
  .task-card {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    padding: 30rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    
    .task-icon {
      margin-right: 20rpx;
}
    
    .task-content {
      flex: 1;
      
      .task-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 4rpx;
}
      
      .task-desc {
        font-size: 24rpx;
        color: #666;
}
    }
    
    .task-reward {
      display: flex;
      align-items: center;
      margin-right: 20rpx;
      
      .reward-points {
        font-size: 28rpx;
        font-weight: bold;
        color: #ff6b81;
        margin-right: 4rpx;
}
    }
    
    .task-btn {
      background: #ff6b81;
      color: #fff;
      font-size: 24rpx;
      padding: 10rpx 20rpx;
      border-radius: 20rpx;
      
      &.completed {
        background: #ccc;
}
    }
  }
}

.rules-content {
  .rule-item {
    background: #f8f8f8;
    padding: 30rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    
    .rule-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 8rpx;
}
    
    .rule-desc {
      font-size: 24rpx;
      color: #666;
      line-height: 1.5;
}
  }
}
</style>